<div id="slipSearchBar" class="slipsearch-bar" style="display: none;">
    <img class="slipsearch-close" src="static/pic/wap/back.png" onclick="closeSlipSearchDiv()" />
    <div class="slipsearch-content">
        <img class="slipsearch-search" src="static/pic/wap/search2.png" />
        <input type="text" id="searchKeyword" class="slipsearch-input" placeholder="请填写关键词" autocomplete="off" />
    </div>
    <div class="slipsearch-btn" onclick="submitSearch()">搜索</div>
</div>
<div id="maskSlipSearchDiv" class="mask-slipsearch-div" style="display: none;"></div>
<input type="text" id="searchOldKeyword" class="display-none" />

<script type="text/javascript">
    function submitSearch() {
        if (isEmpty('searchKeyword') || isWicked('searchKeyword')) {
            showTip('请填写正确的搜索关键词');
            return;
        }
        if (getValue('searchKeyword') == getValue('searchOldKeyword')) {
            showTip('请填写不同的搜索关键词');
            return;
        }

        setDisplay('maskSlipSearchDiv', 'none');
        document.body.style.overflow = 'visible';

        setValue('searchOldKeyword', getValue('searchKeyword'));
        isBodyScroll('yes');

        queryKey('search');
    }

    function openSlipSearchDiv() {
        setDisplay('slipSearchBar', '');
        setDisplay('maskSlipSearchDiv', '');
        document.body.style.overflow = 'hidden';
        isBodyScroll('no');

        getItem('searchKeyword').focus();

        slipsearch_clearOption();
    }

	function closeSlipSearchDiv() {
		setDisplay('slipSearchBar', 'none');
        setDisplay('maskSlipSearchDiv', 'none');
        document.body.style.overflow = 'visible';

        setValue('searchKeyword', '');
        setValue('searchOldKeyword', '');
        isBodyScroll('yes');

        queryKey('ok');
	}
</script>

<style type="text/css">
    .slipsearch-bar
    {
    	width: 100%;
        max-width: 750px;
    	height: 80px;
    	background-color: var(--theme-color);
    	border-bottom: 1px solid var(--theme-color);
    	display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	    position: fixed;
	    top: 0;
	    z-index: 201;
    }

    .slipsearch-close
    {
        -webkit-flex: none;
        height: 36px;
        margin-left: 20px;
        margin-right: 26px;
    }

    .slipsearch-content
    {
        -webkit-flex: auto;
        height: 70px;
        background-color: #f6f6f6;
        border-radius: 30px;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        -webkit-align-items: center;
    }

    .slipsearch-search
    {
        -webkit-flex: none;
        height: 40px;
        margin-left: 24px;
        margin-right: 14px;
    }

    .slipsearch-input
    {
        -webkit-flex: auto;
        color: #333333;
        font-size: 30px;
        text-align: left;
        background-color: #f6f6f6;
        border-style: none;
        outline: none;
        margin-right: 28px;
    }

    input::-webkit-input-placeholder
    {
        color: #d2d2d2;
    }

    .slipsearch-btn
    {
        -webkit-flex: none;
        color: white;
        font-size: 28px;
        margin-left: 30px;
        margin-right: 26px;
    }

	.mask-slipsearch-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 200;
    }
</style>